﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">	
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="common.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	
  </head>
  <body>
	<!--导航条-->
	<!--需要解决的问题，导航条需要缩小到44px-->
	<nav class="navbar navbar-default navbar-static-top" style="background-color:#2459a2;">
	  <div class="container-fluid col-md-offset-1">
		<div class="navbar-header">
		  <a class="navbar-brand" href="/">
			<img alt="Brand" src="logo.png">
		  </a>
		</div>
		
		<div style="line-height: 30px;">
			 <ul class="nav nav-pills baise">
				  <li class="active"><a href="#" style="color:#fff;">全部</a></li>
				  <li><a href="#">42区</a></li>
				  <li><a href="#">段子</a></li>
				  <li><a href="#">图片</a></li>
				  <li><a href="#">挨踢1024</a></li>
				  <li><a href="#">你问我答</a></li>
				  <li><a href="#" style="right: -230%;">注册</a></li>
				  <li><a href="#" style="right: -230%;">登陆</a></li>

					<!--搜索框-->
					<form class="navbar-form navbar-left navbar-right" role="search">
					  <div class="form-group">
						<!--这里需要将默认的搜索框改成灰色的,还有整合搜索框改小-->
						<input type="text" class="form-control " placeholder="Search">
						<button type="submit" class="btn btn-default" style="right:5px;"><span class="glyphicon glyphicon-search"></span></button>
					  </div>
					</form>
			 </ul>
		</div>
	  </div>
	</nav>
	
	<!--全局菜单div-->
<div class="content">
	<div style="background-color:#dddddd;margin:0 auto;" >
			<!--padding: 6px 28px 60px;增加外边距-->
			<!--中部菜单div-->
			<div style="margin:0 auto;width: 1000px;min-height: 713px;background-color:#fff;height:auto !important;padding: 6px 28px 60px;">
				<div style="overflow: hidden;clear: both;border-bottom: 1px solid #ccdcef;width: 630px">
					<a class="kuaibiaoqian" href="#">最热</a>
					<a class="kuaibiaoqian" href="#">最新</a>
					<a class="kuaibiaoqian" href="#">人类发布</a>

					<input style="background-color:#84a42b;color:#fff;font-size: 15px;width: 130px;float: right;line-height:2;text-align: center;" class="glyphicon glyphicon-plus" href="#" type="button" value="发布"/>

					<a class="kuaibiaoqian" style="float: right;color:#84a42b;" href="#">3天</a>
					<a class="kuaibiaoqian" style="float: right;color:#84a42b;" href="#">24小时</a>
					<a class="kuaibiaoqian" style="float: right;color:#b4b4b4;" href="#">即时排序</a>
				</div>
				
				<!--右边菜单-->
				<div style="margin:0 auto;width: 300px;min-height: 475px;background-color:#faf;float:right;top:-40px;padding:20px;;position: relative;">
					<textarea style="height:400px;width:260px;">123 </textarea>
				</div>		
				
				<!--主要内容-->
				<div class="media" style="width: 630px;border-bottom: 1px solid #ccdcef;padding-bottom: 10px;">
				  <div class="media-left media-middle" style="float: right;">
					<a href="#">
					  <img class="media-object" src="size-min.png" alt="没有图片。">
					</a>
				  </div>
				  <div class="media-body">
					<h4 class="media-heading h4yanse jiacu">传阿里巴巴收购陌陌，这会是笔好买卖吗？<small>-www.pingwest.com<a href="#">挨踢1024</a></small></h4>
					用户增长下滑严重，商业化、新功能和改版数据不理想，陌陌宣布了大半年的私有化至今没有动作。或许真到了找金主的时候了。
					</br>
					<a class="glyphicon glyphicon-thumbs-up" href="javascript:;" style="padding:5px;" title="推荐">19</a>
					<a class="glyphicon glyphicon-comment" href="javascript:;"  style="padding:5px;" title="评论">8</a>
					<a class="glyphicon glyphicon-heart" href="javascript:;"  style="padding:5px;" title="私藏">8</a>
				  </div>
				</div>
				<!--主要内容-->
				<div class="media" style="width: 630px;border-bottom: 1px solid #ccdcef;padding-bottom: 10px;">
				  <div class="media-left media-middle" style="float: right;">
					<a href="#">
					  <img class="media-object" src="size-min.png" alt="没有图片。">
					</a>
				  </div>
				  <div class="media-body">
					<h4 class="media-heading h4yanse jiacu">传阿里巴巴收购陌陌，这会是笔好买卖吗？<small>-www.pingwest.com<a href="#">挨踢1024</a></small></h4>
					用户增长下滑严重，商业化、新功能和改版数据不理想，陌陌宣布了大半年的私有化至今没有动作。或许真到了找金主的时候了。
					</br>
					<a class="glyphicon glyphicon-thumbs-up" href="javascript:;" style="padding:5px;" title="推荐">19</a>
					<a class="glyphicon glyphicon-comment" href="javascript:;"  style="padding:5px;" title="评论">8</a>
					<a class="glyphicon glyphicon-heart" href="javascript:;"  style="padding:5px;" title="私藏">8</a>
				  </div>
				</div>
				<!--主要内容-->
				<div class="media" style="width: 630px;border-bottom: 1px solid #ccdcef;padding-bottom: 10px;">
				  <div class="media-left media-middle" style="float: right;">
					<a href="#">
					  <img class="media-object" src="size-min.png" alt="没有图片。">
					</a>
				  </div>
				  <div class="media-body">
					<h4 class="media-heading h4yanse jiacu">传阿里巴巴收购陌陌，这会是笔好买卖吗？<small>-www.pingwest.com<a href="#">挨踢1024</a></small></h4>
					用户增长下滑严重，商业化、新功能和改版数据不理想，陌陌宣布了大半年的私有化至今没有动作。或许真到了找金主的时候了。
					</br>
					<a class="glyphicon glyphicon-thumbs-up" href="javascript:;" style="padding:5px;" title="推荐">19</a>
					<a class="glyphicon glyphicon-comment" href="javascript:;"  style="padding:5px;" title="评论">8</a>
					<a class="glyphicon glyphicon-heart" href="javascript:;"  style="padding:5px;" title="私藏">8</a>
				  </div>
				</div>
				<!--主要内容-->
				<div class="media" style="width: 630px;border-bottom: 1px solid #ccdcef;padding-bottom: 10px;">
				  <div class="media-left media-middle" style="float: right;">
					<a href="#">
					  <img class="media-object" src="size-min.png" alt="没有图片。">
					</a>
				  </div>
				  <div class="media-body">
					<h4 class="media-heading h4yanse jiacu">传阿里巴巴收购陌陌，这会是笔好买卖吗？<small>-www.pingwest.com<a href="#">挨踢1024</a></small></h4>
					用户增长下滑严重，商业化、新功能和改版数据不理想，陌陌宣布了大半年的私有化至今没有动作。或许真到了找金主的时候了。
					</br>
					<a class="glyphicon glyphicon-thumbs-up" href="javascript:;" style="padding:5px;" title="推荐">19</a>
					<a class="glyphicon glyphicon-comment" href="javascript:;"  style="padding:5px;" title="评论">8</a>
					<a class="glyphicon glyphicon-heart" href="javascript:;"  style="padding:5px;" title="私藏">8</a>
				  </div>
				</div>			
				<!--主要内容-->
				<div class="media" style="width: 630px;border-bottom: 1px solid #ccdcef;padding-bottom: 10px;">
				  <div class="media-left media-middle" style="float: right;">
					<a href="#">
					  <img class="media-object" src="size-min.png" alt="没有图片。">
					</a>
				  </div>
				  <div class="media-body">
					<h4 class="media-heading h4yanse jiacu">传阿里巴巴收购陌陌，这会是笔好买卖吗？<small>-www.pingwest.com<a href="#">挨踢1024</a></small></h4>
					用户增长下滑严重，商业化、新功能和改版数据不理想，陌陌宣布了大半年的私有化至今没有动作。或许真到了找金主的时候了。
					</br>
					<a class="glyphicon glyphicon-thumbs-up" href="javascript:;" style="padding:5px;" title="推荐">19</a>
					<a class="glyphicon glyphicon-comment" href="javascript:;"  style="padding:5px;" title="评论">8</a>
					<a class="glyphicon glyphicon-heart" href="javascript:;"  style="padding:5px;" title="私藏">8</a>
				  </div>
				</div>			
				<!--主要内容-->
				<div class="media" style="width: 630px;border-bottom: 1px solid #ccdcef;padding-bottom: 10px;">
				  <div class="media-left media-middle" style="float: right;">
					<a href="#">
					  <img class="media-object" src="size-min.png" alt="没有图片。">
					</a>
				  </div>
				  <div class="media-body">
					<h4 class="media-heading h4yanse jiacu">传阿里巴巴收购陌陌，这会是笔好买卖吗？<small>-www.pingwest.com<a href="#">挨踢1024</a></small></h4>
					用户增长下滑严重，商业化、新功能和改版数据不理想，陌陌宣布了大半年的私有化至今没有动作。或许真到了找金主的时候了。
					</br>
					<a class="glyphicon glyphicon-thumbs-up" href="javascript:;" style="padding:5px;" title="推荐">19</a>
					<a class="glyphicon glyphicon-comment" href="javascript:;"  style="padding:5px;" title="评论">8</a>
					<a class="glyphicon glyphicon-heart" href="javascript:;"  style="padding:5px;" title="私藏">8</a>
				  </div>
				</div>						

		
				
				
				
				<!--底部下一页-->
				<div class="btn-toolbar" role="toolbar" aria-label="..." style="padding:20px 28px 60px;" zt="zhangting">
				  <span style="float:left;padding: 7px;">1</span>
				  <button type="button" class="btn btn-default" href="#">2</button>
				  <button type="button" class="btn btn-default" href="#">3</button>
				  <button type="button" class="btn btn-default" href="#">4</button>
				  <button type="button" class="btn btn-default" href="#">5</button>
				  <button type="button" class="btn btn-default" href="#">6</button>
				  <button type="button" class="btn btn-default" href="#">7</button>
				  <button type="button" class="btn btn-default" href="#">8</button>
				  <button type="button" class="btn btn-default" href="#">9</button>
				  <button type="button" class="btn btn-default" href="#">10</button>
				  <button type="button" class="btn btn-default" href="#">下一页</button>
				</div>

					<!--最底部关于信息-->
					
					<div zt="zhangting" style="padding:20px;border-top: 1px solid #ccdcef;text-align: center;" aria-label="..." role="toolbar" class="btn-toolbar">
					<!--<div style="position: absolute; margin-left:130px;border-top: 1px solid #ccdcef;">-->
						<div class="foot-nav span-padding">
							<div style="display:none""></div>
							<div style="display:none"></div>
							<a href="#" target="_blank">关于我们</a>
							<span>|</span>
							<a href="#" target="_blank">联系我们</a>
							<span>|</span>
							<a href="/help/service" target="_blank">服务条款</a>
							<span>|</span>
							<a href="#" target="_blank">隐私政策</a>
							<span>|</span>
							<a href="#" target="_blank">抽屉新热榜工具</a>
							<span>|</span>
							<a href="#" target="_blank">下载客户端</a>
							<span>|</span>
							<a href="#" target="_blank">意见与反馈</a>
							<span>|</span>
							<a href="#" target="_blank" >友情链接</a>
							<span>|</span>
							<a href="http://www.baidu.com" target="_blank">公告</a>
							<!--<span>|</span><a href="/points/gifts" target="_blank">积分商城</a>-->
							<a href="http://www.baidu.com" target="_blank" style="margin-left:5px;vertical-align:2px;" title="Rss订阅，Feed地址：http://www.baidu.com">
								<img src="ct_rss.gif" width="36" height="14">
							</a>
						</div>
						
						<div class="foot-nav2">
							<a href="http://www.gozap.com/" target="_blank">
								<img src="gozap-logo-50_15.gif">
							</a>
							<span class="foot_d">旗下站点</span>
							<span class="foot_a">© 2016 zhangting.com</span>
							<a target="_blank" href="http://www.miibeian.gov.cn/" class="huise">京ICP备090500000号-3 京公网安备 1101000000</a>
							
							<div>版权所有：科技有限公司</div>
						</div>
					</div>
				</div>			
				<!--右下返回顶部效果-->
				<div class="return_top ">

				</div>					
			</div>
</div>
		



 <!--以下是测试用的代码-->
<!--分页-->


<!--华丽的分割线-->

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">这个地址访问不了</script>-->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/jquery-2.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script>
	$(function(){
		$(window).scroll(function(){
		   if($(window).scrollTop()>100){
			   $(".return_top").fadeIn(800);
		   }else{
			   $(".return_top").fadeOut(800);
		   }
		});
		$(".return_top").click(function(){
			$('body,html').animate({scrollTop:0},500);
			return false;

		});
	})
	</script>
  </body>
</html>